<template>
  <el-main>
    <el-tabs v-model="activeName">
      <el-tab-pane label="搜索商品" name="first">
        <!-- 遍历list -->
        <el-col :span="4"
          v-for="good in list"
          :key="good.gid"
          :offset="1"
          style="padding-left: 50px"
        >
          <!-- 页面跳转时，通过查询字符串来传递商品的id -->
          <router-link
            :to="'/detail?id=' + good.gid"
            style="text-decoration: none"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              style="height: 400px; width: 350px"
            >
              <img
                :src="'http://127.0.0.1:3001/images/'+good.img"
                class="image"
                style="height: 260px; width: 100%"
              />
              <div style="text-align: center; font-size: 20px">
                <span style="display: inline-block">{{ good.name }}</span>
                <div>
                  <span
                    class="time"
                    style="display: block; color: red; font-size: 25px"
                    >￥{{ good.price }}</span
                  >
                  <el-button type="text" class="button" style="font-size: 20px"
                    >加入购物车</el-button
                  >
                </div>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
       list:[] //存放全部模糊查询的商品
    };
  },
  methods: {
  	async fetchAllGoods(keyword) {
    try { //尝试尝试执行异步请求
        const res = await this.axios.post('/api/goods/nocleargoods', { keyword: keyword });//将商品keyword作为请求体中的keyword参数传递
        this.list = res.data.data;//this.list就是存放的模糊查询的商品信息
    } catch (err) {
        console.error(err.message);
    }
},
  searchGoods(keyword) {
        this.fetchAllGoods(keyword);
    }
  },
  	mounted() {//组件实例挂载到DOM后执行一些初始化逻辑
    this.fetchAllGoods(); // 初始调用，可能传递空字符串或默认搜索词
    let keyword = this.$route.query.inp;  // 从URL查询参数中获取搜索词
    if (keyword) {
        this.searchGoods(keyword); //如果查询参数中有搜索词，则执行搜索
    }
},
};
</script>

<style>
</style>